<!-- 公众号管理 -->
<template>
  <div>
    <div class="_mb-20">
      <a-alert type="info" message="温馨提示：" show-icon>
        <div slot="description">
          <ol>
            <li>
              授权服务号类型前，请登录微信公众号（服务号）后台，设置服务类目，路径：公众号设置-->服务类目-->详情-->申请更多类目，需要设置以下5个服务类目:
              <ul>
                <li>工具>预约/报名</li>
                <li>商业服务>会展服务</li>
                <li>商业服务>企业管理</li>
                <li>商业服务>软件/建站/技术开发</li>
                <li>生活服务>家政服务</li>
              </ul>
            </li>
            <li>添加服务类目后让服务号管理员扫码授权，才能接收服务号通知，否则无法获取模版通知；</li>
            <li>公众号模版数量需提前预留22个，如不够需自行清理，否则无法获取标准消息模版。</li>
          </ol>
        </div>
      </a-alert>
    </div>
    <a-card :bordered="false" class="br-10">
      <a-spin :spinning="loading">
        <div v-if="authInfo.name">
          <div class="_header" style="background: #fff">
            <div>
              <span class="title">{{ authInfo.name }}</span>
              <a-icon type="sync" class="icon" @click="GetAuthStatus(true)" />
            </div>
            <div class="desc">APPID：{{ authInfo.appid }}</div>
            <div class="desc">主体名称： {{ authInfo.principalName }}</div>
            <div class="desc">
              公众号类型：
              <a-button type="link" size="small">
                {{ authInfo.serviceType }}
              </a-button>
            </div>
            <div class="desc">
              公众号认证类型：
              <span :style="{ color: authInfo.verifyType === '未认证' ? '#d5d1d8' : '#52c41a' }">
                {{ authInfo.verifyType }}
              </span>
            </div>
            <a-button type="primary" @click="handleBind">重新授权</a-button>
          </div>
        </div>

        <div v-else>
          <div class="_header">
            <div>
              <span class="title">微信公众号</span>
            </div>
          </div>

          <div class="content">
            <div class="box">
              <div class="title">已注册公众号</div>
              <div class="desc">
                绑定商家公众号后，用户可在微信内收到商家公众号的消息推送；审核、活动、问卷等各种场景下，用户可收到微信模板消息提醒。
              </div>
              <a-button type="primary" @click="handleBind">立即绑定</a-button>
            </div>

            <div class="box">
              <div class="title">未注册公众号</div>
              <div class="desc">
                点击下方按钮前往公众平台注册（目前仅支持『企业』类型的主体）；注册成功后，再进行绑定授权。
              </div>
              <a-button @click="handleToOfficial">前往注册公众号</a-button>
            </div>
          </div>
        </div>
      </a-spin>

      <TipModal ref="tipModal" @reload="GetAuthStatus" />
    </a-card>
    <List v-if="authInfo.name"></List>
  </div>
</template>

<script>
import { getAuthUrl, getAuthStatus } from '@/api/system/system'
import Vue from 'vue'
import { TENANTID } from '@/store/mutation-types'
import TipModal from '../components/tipModal.vue'
import List from './components/List.vue'
export default {
  components: {
    TipModal,
    List
  },
  data() {
    return {
      params: {
        authType: 1,
        tenantId: Vue.ls.get(TENANTID),
        // redirectUri: process.env.VUE_APP_MODEL_BASE_URL.replace('/api', '') + '/system/officialManager',
        redirectUri: `${window.origin}/system/officialManager`
      },
      authStatus: false,
      authInfo: {},
      loading: true
    }
  },
  computed: {},
  watch: {},
  methods: {
    async handleBind() {
      try {
        let res = await getAuthUrl(this.params)
        window.open(res)
        this.$refs.tipModal.show()
      } catch (error) {
        console.error(error)
      }
    },
    async GetAuthStatus(reload) {
      try {
        this.loading = true
        let res = await getAuthStatus(this.params)
        this.authInfo = res.data || {}
        if (reload) this.$message.success('更新成功')
        this.loading = false
      } catch (error) {
        console.log(error)
        if (reload) this.$message.success('更新失败')
        this.loading = false
      }
    },
    handleToOfficial() {
      window.open('https://mp.weixin.qq.com')
    }
  },
  created() {
    this.GetAuthStatus()
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
._header {
  width: 100%;
  .title {
    font-size: 24px;
    font-weight: bold;
  }

  .desc {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .icon {
    font-size: 24px;
    font-weight: bold;
    margin-left: 20px;
    cursor: pointer;
  }
}

.content {
  display: flex;
  margin-top: 20px;

  .box {
    width: 380px;
    height: 250px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 15px;

    .title {
      font-size: 16px;
      font-weight: bold;
    }

    .desc {
      margin: 30px 0;
    }
  }

  .box:nth-child(2) {
    margin-left: 20px;
  }
}
</style>
